﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>我的桌面</title>
    <link href="css/new/animate.css" rel="stylesheet" type="text/css" />
    <link href="css/new/bootstrap.min.css?v=3.4.0" rel="stylesheet" />
    <link href="css/new/style.css?v=2.2.0" rel="stylesheet" />
</head>
<body>
    <div id="wrapper">
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-4">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">月</span>
                            <h5>
                                目标完成率</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="main" style="height: 350px; width: 450px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-success pull-right">今天</span>
                            <h5>
                                今日销售
                            </h5>
                        </div>
                        <div class="ibox-content">
                            <div id="Div2" style="height: 300px; ">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
               <div class="col-lg-4">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right">周</span>
                            <h5>
                                店铺销售</h5>
                        </div>
                        <div class="ibox-content">
                            <div id="Div1" style="height: 300px; width: 400px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>
                                订单</h5>
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-xs btn-white active">
                                        天</button>
                                    <button type="button" class="btn btn-xs btn-white">
                                        月</button>
                                    <button type="button" class="btn btn-xs btn-white">
                                        年</button>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-lg-12">
                                    <ul class="stat-list">
                                        <li>
                                            <h2 class="no-margins">
                                                2,346</h2>
                                            <small>订单总数</small>
                                            <div class="stat-percent">
                                                48% <i class="fa fa-level-up text-navy"></i>
                                            </div>
                                            <div class="progress progress-mini">
                                                <div style="width: 48%;" class="progress-bar">
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <h2 class="no-margins ">
                                                4,422</h2>
                                            <small>最近一个月订单</small>
                                            <div class="stat-percent">
                                                60% <i class="fa fa-level-down text-navy"></i>
                                            </div>
                                            <div class="progress progress-mini">
                                                <div style="width: 60%;" class="progress-bar">
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <h2 class="no-margins ">
                                                9,180</h2>
                                            <small>最近一个月销售额</small>
                                            <div class="stat-percent">
                                                22% <i class="fa fa-bolt text-navy"></i>
                                            </div>
                                            <div class="progress progress-mini">
                                                <div style="width: 22%;" class="progress-bar">
                                                </div>
                                            </div>
                                        </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/echarts.js" type="text/javascript"></script>
    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var myChart2 = echarts.init(document.getElementById("Div1"));
        var myChart3 = echarts.init(document.getElementById("Div2"));
        option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                        {
                            name: '业务指标',
                            type: 'gauge',
                            detail: { formatter: '{value}%' },
                            data: [{ value: 58.6, name: '业绩完成率'}]
                        }
                    ]
        };
        myChart.setOption(option, true);

        option2 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
            yAxis: [
        {
            type: 'value'
        }
    ],
            series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
        };
        myChart2.setOption(option2, true);

        option3 = {
            title: {
                text: '店铺销售总量',
                subtext: '卡门'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['2015年', '2016年']
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
        {
            type: 'value',
            boundaryGap: [0, 0.01]
        }
    ],
            yAxis: [
        {
            type: 'category',
            data: ['北京路1店', '上下九步行街', '深圳步行街', '武汉光谷1店', '湖南长沙店', '太原店']
        }
    ],
            series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
        };
        myChart3.setOption(option3, true);
    </script>
</body>
</html>
